Skip to content

feat(react-router): Add otel instrumentation for server requests #16147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
May 14, 2025

Conversation

chargome
Copy link
Member

@chargome chargome commented Apr 28, 2025

This PR adds OpenTelemetry instrumentation for server-side requests in React Router by tracing server requests for data loaders and actions.

@chargome chargome self-assigned this Apr 28, 2025
@chargome
Copy link
Member Author

chargome commented Apr 29, 2025

Potentially blocked by #16160
good to go

@chargome chargome marked this pull request as ready for review May 12, 2025 14:57

// Set the source and overwrite attributes on the root span to ensure the transaction name
// is derived from the raw URL pathname rather than any parameterized route that may be set later
// TODO: try to set derived parameterized route from build here (args[0])
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

want to ship this in a follow-up

Copy link
Member

@andreiborza andreiborza left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@chargome chargome merged commit 26731ed into develop May 14, 2025
133 checks passed
@chargome chargome deleted the cg-rr-server-loaders branch May 14, 2025 08:07
mergify bot added a commit to reisene/HulajDusza-serwis that referenced this pull request Jun 9, 2025
![snyk-io[bot]](https://badgen.net/badge/icon/snyk-io%5Bbot%5D/green?label=)
![Contributor](https://badgen.net/badge/icon/Contributor/000000?label=)
[<img width="16" alt="Powered by Pull Request Badge"
src="https://user-images.githubusercontent.com/1393946/111216524-d2bb8e00-85d4-11eb-821b-ed4c00989c02.png">](https://pullrequestbadge.com/?utm_medium=github&utm_source=reisene&utm_campaign=badge_info)<!--
PR-BADGE: PLEASE DO NOT REMOVE THIS COMMENT -->


![snyk-top-banner](https://res.cloudinary.com/snyk/image/upload/r-d/scm-platform/snyk-pull-requests/pr-banner-default.svg)


<h3>Snyk has created this PR to upgrade @sentry/browser from 9.17.0 to
9.19.0.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.

<hr/>


- The recommended version is **2 versions** ahead of your current
version.

- The recommended version was released **22 days ago**.



<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>@sentry/browser</b></summary>
    <ul>
      <li>
<b>9.19.0</b> - <a
href="https://redirect.github.com/getsentry/sentry-javascript/releases/tag/9.19.0">2025-05-14</a></br><ul>
<li>feat(react-router): Add otel instrumentation for server requests (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16147"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16147/hovercard">#16147</a>)</li>
<li>feat(remix): Vendor in
<code>opentelemetry-instrumentation-remix</code> (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16145"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16145/hovercard">#16145</a>)</li>
<li>fix(browser): Ensure spans auto-ended for navigations have
<code>cancelled</code> reason (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16277"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16277/hovercard">#16277</a>)</li>
<li>fix(node): Pin <code>@ fastify/otel</code> fork to direct url to
allow installing without git (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16287"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16287/hovercard">#16287</a>)</li>
<li>fix(react): Handle nested parameterized routes in reactrouterv3
transaction normalization (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16274"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16274/hovercard">#16274</a>)</li>
</ul>
<p>Work in this release was contributed by <a class="user-mention
notranslate" data-hovercard-type="user"
data-hovercard-url="/users/sidx1024/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://redirect.github.com/sidx1024">@ sidx1024</a>. Thank you
for your contribution!</p>
<h2>Bundle size 📦</h2>
<table>
<thead>
<tr>
<th>Path</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>@ sentry/browser</td>
<td>23.4 KB</td>
</tr>
<tr>
<td>@ sentry/browser - with treeshaking flags</td>
<td>23.06 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing)</td>
<td>37.31 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay)</td>
<td>74.53 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay) - with treeshaking
flags</td>
<td>67.72 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay with Canvas)</td>
<td>79.19 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay, Feedback)</td>
<td>91 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Feedback)</td>
<td>39.8 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. sendFeedback)</td>
<td>28.03 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. FeedbackAsync)</td>
<td>32.79 KB</td>
</tr>
<tr>
<td>@ sentry/react</td>
<td>25.17 KB</td>
</tr>
<tr>
<td>@ sentry/react (incl. Tracing)</td>
<td>39.27 KB</td>
</tr>
<tr>
<td>@ sentry/vue</td>
<td>27.67 KB</td>
</tr>
<tr>
<td>@ sentry/vue (incl. Tracing)</td>
<td>39.07 KB</td>
</tr>
<tr>
<td>@ sentry/svelte</td>
<td>23.43 KB</td>
</tr>
<tr>
<td>CDN Bundle</td>
<td>24.58 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing)</td>
<td>37.33 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay)</td>
<td>72.37 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay, Feedback)</td>
<td>77.68 KB</td>
</tr>
<tr>
<td>CDN Bundle - uncompressed</td>
<td>71.72 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing) - uncompressed</td>
<td>110.5 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay) - uncompressed</td>
<td>221.78 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed</td>
<td>234.31 KB</td>
</tr>
<tr>
<td>@ sentry/nextjs (client)</td>
<td>40.88 KB</td>
</tr>
<tr>
<td>@ sentry/sveltekit (client)</td>
<td>37.77 KB</td>
</tr>
<tr>
<td>@ sentry/node</td>
<td>154.29 KB</td>
</tr>
<tr>
<td>@ sentry/node - without tracing</td>
<td>95.6 KB</td>
</tr>
<tr>
<td>@ sentry/aws-serverless</td>
<td>120.36 KB</td>
</tr>
</tbody>
</table>
      </li>
      <li>
<b>9.18.0</b> - <a
href="https://redirect.github.com/getsentry/sentry-javascript/releases/tag/9.18.0">2025-05-13</a></br><h3>Important
changes</h3>
<ul>
<li><strong>feat: Support Node 24 (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16236"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16236/hovercard">#16236</a>)</strong></li>
</ul>
<p>We now also publish profiling binaries for Node 24.</p>
<h3>Other changes</h3>
<ul>
<li>deps(node): Bump <code>import-in-the-middle</code> to
<code>1.13.1</code> (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16260"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16260/hovercard">#16260</a>)</li>
<li>feat: Export <code>consoleLoggingIntegration</code> from vercel edge
sdk (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16228"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16228/hovercard">#16228</a>)</li>
<li>feat(cloudflare): Add support for email, queue, and tail handler (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16233"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16233/hovercard">#16233</a>)</li>
<li>feat(cloudflare): Improve http span data (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16232"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16232/hovercard">#16232</a>)</li>
<li>feat(nextjs): Add more attributes for generation functions (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16214"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16214/hovercard">#16214</a>)</li>
<li>feat(opentelemetry): Widen peer dependencies to support Otel v2 (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16246"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16246/hovercard">#16246</a>)</li>
<li>fix(core): Gracefully handle invalid baggage entries (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16257"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16257/hovercard">#16257</a>)</li>
<li>fix(node): Ensure traces are propagated without spans in Node 22+
(<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16221"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16221/hovercard">#16221</a>)</li>
<li>fix(node): Use sentry forked <code>@ fastify/otel</code> dependency
with pinned Otel v1 deps (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16256"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16256/hovercard">#16256</a>)</li>
<li>fix(remix): Remove vendored types (<a
href="https://redirect.github.com/getsentry/sentry-javascript/pull/16218"
data-hovercard-type="pull_request"
data-hovercard-url="/getsentry/sentry-javascript/pull/16218/hovercard">#16218</a>)</li>
</ul>
<h2>Bundle size 📦</h2>
<table>
<thead>
<tr>
<th>Path</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>@ sentry/browser</td>
<td>23.4 KB</td>
</tr>
<tr>
<td>@ sentry/browser - with treeshaking flags</td>
<td>23.22 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing)</td>
<td>37.3 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay)</td>
<td>74.53 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay) - with treeshaking
flags</td>
<td>68.37 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay with Canvas)</td>
<td>79.18 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Tracing, Replay, Feedback)</td>
<td>90.99 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. Feedback)</td>
<td>39.8 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. sendFeedback)</td>
<td>28.03 KB</td>
</tr>
<tr>
<td>@ sentry/browser (incl. FeedbackAsync)</td>
<td>32.79 KB</td>
</tr>
<tr>
<td>@ sentry/react</td>
<td>25.17 KB</td>
</tr>
<tr>
<td>@ sentry/react (incl. Tracing)</td>
<td>39.26 KB</td>
</tr>
<tr>
<td>@ sentry/vue</td>
<td>27.67 KB</td>
</tr>
<tr>
<td>@ sentry/vue (incl. Tracing)</td>
<td>39.06 KB</td>
</tr>
<tr>
<td>@ sentry/svelte</td>
<td>23.43 KB</td>
</tr>
<tr>
<td>CDN Bundle</td>
<td>24.58 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing)</td>
<td>37.33 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay)</td>
<td>72.37 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay, Feedback)</td>
<td>77.67 KB</td>
</tr>
<tr>
<td>CDN Bundle - uncompressed</td>
<td>71.72 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing) - uncompressed</td>
<td>110.46 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay) - uncompressed</td>
<td>221.75 KB</td>
</tr>
<tr>
<td>CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed</td>
<td>234.27 KB</td>
</tr>
<tr>
<td>@ sentry/nextjs (client)</td>
<td>40.88 KB</td>
</tr>
<tr>
<td>@ sentry/sveltekit (client)</td>
<td>37.76 KB</td>
</tr>
<tr>
<td>@ sentry/node</td>
<td>155.42 KB</td>
</tr>
<tr>
<td>@ sentry/node - without tracing</td>
<td>96 KB</td>
</tr>
<tr>
<td>@ sentry/aws-serverless</td>
<td>121.5 KB</td>
</tr>
</tbody>
</table>
      </li>
      <li>
        <b>9.17.0</b> - 2025-05-08
      </li>
    </ul>
from <a
href="https://redirect.github.com/getsentry/sentry-javascript/releases">@sentry/browser
GitHub release notes</a>
  </details>
</details>

---

> [!IMPORTANT]
>
> - Check the changes in this PR to ensure they won't cause issues with
your project.
> - This PR was automatically created by Snyk using the credentials of a
real user.

---

**Note:** _You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs._

**For more information:** <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiJhZGRlMzcwYy1hNTZkLTRmZjUtOWJhMC05N2Q3NTE4NmE5YmQiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6ImFkZGUzNzBjLWE1NmQtNGZmNS05YmEwLTk3ZDc1MTg2YTliZCJ9fQ=="
width="0" height="0"/>

> - 🧐 [View latest project
report](https://app.snyk.io/org/reisene/project/55e114f8-489e-4f14-b900-20574b041e59?utm_source&#x3D;github-cloud-app&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 📜 [Customise PR
templates](https://docs.snyk.io/scan-using-snyk/pull-requests/snyk-fix-pull-or-merge-requests/customize-pr-templates?utm_source=&utm_content=fix-pr-template)
> - 🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/reisene/project/55e114f8-489e-4f14-b900-20574b041e59/settings/integration?utm_source&#x3D;github-cloud-app&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)
> - 🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/reisene/project/55e114f8-489e-4f14-b900-20574b041e59/settings/integration?pkg&#x3D;@sentry/browser&amp;utm_source&#x3D;github-cloud-app&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

[//]: #
'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"@sentry/browser","from":"9.17.0","to":"9.19.0"}],"env":"prod","hasFixes":false,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":[],"prId":"adde370c-a56d-4ff5-9ba0-97d75186a9bd","prPublicId":"adde370c-a56d-4ff5-9ba0-97d75186a9bd","packageManager":"npm","priorityScoreList":[],"projectPublicId":"55e114f8-489e-4f14-b900-20574b041e59","projectUrl":"https://app.snyk.io/org/reisene/project/55e114f8-489e-4f14-b900-20574b041e59?utm_source=github-cloud-app&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":[],"type":"auto","upgrade":[],"upgradeInfo":{"versionsDiff":2,"publishedDate":"2025-05-14T12:07:24.206Z"},"vulns":[]}'

## Podsumowanie wygenerowane przez Sourcery

Build:
- Zaktualizowano wersję @sentry/browser w pliku package.json z 9.17.0 do
9.19.0

<details>
<summary>Original summary in English</summary>

## Summary by Sourcery

Build:
- Bump @sentry/browser version in package.json from 9.17.0 to 9.19.0

</details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants